<template>
	<view class="groupjoin" :style="'padding-bottom:'+pagebottom+'px;'">
		<view class="group_join_box" v-if="showPage">
			<view class="display_flex mt-30">
				<view class="popup_title_block"></view>
				<view class="f-16 ml-5">请填写您的入会信息</view>
			</view>
			<view class="step_box">
				<view class="avatar_box">
					<button class="weui-cell weui-memberinfo avatar_btn" open-type="chooseAvatar"
						@chooseavatar="bindchooseavatar">
						<image class="avatar" :src="userinfo.wx_avatar?picUrl+userinfo.wx_avatar:onlinePic+'avatar.png'"
							mode="aspectFill">
						</image>
					</button>
					<view class="f-14 mt-10">点击更改头像</view>
				</view>
				<view class="pop_input_box">
					<view style="width: 110rpx;">昵称</view>
					<input type="nickname" class="pop_input flex-1 ml-20" @input="changeName" @blur="changeName"
						v-model="userinfo.wx_username" />
				</view>
				<view class="pop_input_box">
					<view style="width: 110rpx;">姓名</view>
					<input class="pop_input flex-1 ml-20" v-model="name" maxlength="8" />
				</view>
				<view class="pop_input_box">
					<view style="width: 110rpx;">电话</view>
					<input class="pop_input flex-1 ml-20" type="tel" v-model="mobile" maxlength="11" />
				</view>
				<view class="pop_input_box">
					<view style="width: 110rpx;">性别</view>
					<view class="display_flex ml-20" @click="changeSex(1)">
						<uni-icons v-if="sex==1" type="circle-filled" size="20" color="#191919"></uni-icons>
						<uni-icons v-else type="circle" color="#191919" size="20"></uni-icons>
						<span>男</span>
					</view>
					<view class="display_flex ml-25" @click="changeSex(2)">
						<uni-icons v-if="sex==2" type="circle-filled" size="20" color="#191919"></uni-icons>
						<uni-icons v-else type="circle" color="#191919" size="20"></uni-icons>
						<span>女</span>
					</view>
				</view>
				<view class="pop_input_box">
					<view style="width: 110rpx;">出生日期</view>
					<view class="display_flex flex-1 ml-20" style="justify-content: space-around;">
						<uni-datetime-picker type="date" v-model="birthday" :end="birthday_end" :border="false"
							:clear-icon="false" placeholder="选择出生日期" />
					</view>
					<uni-icons type="down" size="14" color="#191919"></uni-icons>
				</view>
				<view v-for="(item,index) in carslist" :key="index" class="pop_car_box">
					<view class="f-14 mb-10">您的车辆信息</view>
					<view class="pop_input_box">
						<uni-data-select class="flex-1" v-model="item.car_series" :localdata="seriesList" :clear="false"
							placeholder="您的车系"></uni-data-select>
					</view>
					<view class="pop_carimg_box">
						<view class="f-14 mb-10">上传行驶证</view>
						<view class="pop_carimg_cell" style="height: 300rpx;" v-if="item.car_license">
							<image style="height: 300rpx;width: 100%;border-radius: 8rpx;"
								:src="picUrl+item.car_license" mode="aspectFill"></image>
						</view>
						<view v-else class="pop_carimg_cell" style="height: 300rpx;" @click="uploadCarsImg(index)">
							<uni-icons type="plus-filled" color="#00A0DC" size="30"></uni-icons>
						</view>
					</view>
					<view class="text-r" v-if="carslist.length>1">
						<uni-icons @click="delCars(index)" type="trash" size="14" color="#191919"></uni-icons>
					</view>
				</view>

				<view class="text-c mt-20" v-if="carslist.length<3">
					<view class="c-00A0DC f-16" style="text-decoration: underline;" @click="addCars">增加车辆</view>
					<view class="c-999999 f-12 mt-5">- 还可添加{{3-carslist.length}}辆 -</view>
				</view>
			</view>
			<view @click="nextStep()" class="mt-40">
				<view class="group_public_btn_block">确认提交申请</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getCityList,
		getCompanyList,
		submitClubJion,
		getClubJionInfo,
		getClubInfo,
		getClubCarSeries
	} from '@/api/motortime.js';
	let app = getApp()
	export default {
		data() {
			return {
				step: 3,
				value: 0,
				name: '',
				mobile: '',
				sex: '',
				birthday: '',
				car_series_one: '',
				car_model_one: '',
				car_license_one: '',
				car_series_two: '',
				car_model_two: '',
				car_license_two: '',
				car_series_three: '',
				car_model_three: '',
				car_license_three: '',
				birthday_end: '',
				carimglist: [],
				driver_card: [],
				seriesList: [],
				carslist: [],
				status: 0,
				showPage: false,
				isSubmit: true,
				userinfo: uni.getStorageSync('userinfo'),
				picUrl: app.globalData.picUrl,
				onlinePic: app.globalData.onlinePic,
				pagebottom: uni.getSystemInfoSync().safeAreaInsets.bottom > 0 ? 45 : 22,
				btnbottom: uni.getSystemInfoSync().safeAreaInsets.bottom > 0 ? 13 : 4,
			};
		},
		onShow() {
			if (!uni.getStorageSync('access_token')) {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
			if (uni.getStorageSync('onload')) {
				this.userinfo = uni.getStorageSync('userinfo')
				if (uni.getStorageSync('access_token')) {
					this.getClubCarSeries()
				}
			}
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			this.birthday_end = year + '-' + month + '-' + day
			this.query = uni.createSelectorQuery().in(this);
		},
		onLoad(options) {
			if (uni.getStorageSync('access_token')) {
				this.getClubCarSeries()
			}
			var params = {
				event_code: '加入车友会-完善信息',
				path: 'pages/group/groupjoin',
				event_id: '',
				title: '',
				source_page: '',
				value: '',
			}
			app.BurialPoint(params)
		},
		methods: {
			getClubInfo() {
				getClubInfo({
					club_id: this.club_id,
					is_has_club: 1
				}).then(res => {
					if (res.state == 1) {
						this.city_id = res.data.info.city_id
						this.company_id = res.data.info.company_id
						this.companyGrouplist = []
						this.getCompanyList()
					} else {
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
			getClubJionInfo() {
				getClubJionInfo({}).then(res => {
					if (res.state == 1) {
						var info = res.data.info
						if (info.status == 0 || info.status == 1 || info.status == 2) {
							this.club_id = info.club_id
							this.join_id = info.join_id
							this.showPage = true
							this.status = info.status
							this.name = info.name
							this.mobile = info.mobile
							this.club_title = info.club_title
							this.license = info.license
							this.license_one = info.license_one
							this.license_two = info.license_two
							this.status_text = info.status_text
							this.refuse_reason = info.refuse_reason
							this.popup_text = info.popup_text
							this.sex = info.sex
							this.birthday = info.birthday
							if (info.car_series_one != '') {

								this.carslist.push({
									car_series: info.car_series_one,
									car_license: info.car_license_one,
								})
							}
							if (info.car_series_two != '') {
								this.carslist.push({
									car_series: info.car_series_two,
									car_license: info.car_license_two,
								})
							}
							if (info.car_series_three != '') {
								this.carslist.push({
									car_series: info.car_series_three,
									car_license: info.car_license_three,
								})
							}
							if (!info.car_series_one && !info.car_series_two && !info.car_series_three) {
								this.carslist = [{
									car_series: '',
									car_license: '',
								}]
							}
						} else {
							this.showPage = true
							this.carslist = [{
								car_series: '',
								car_license: '',
							}]
						}
					} else {
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
			changeSex(type) {
				this.sex = type
			},
			getClubCarSeries() {
				getClubCarSeries().then(res => {
					if (res.state == 1) {
						this.seriesList = res.data.info
						this.getClubJionInfo()
					} else {
						uni.showToast({
							title: res.error[0],
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
			addCars() {
				var obj = {
					car_series: '',
					// car_model: '',
					car_license: '',
					// modelList: [],
				}
				this.carslist.push(obj)

				this.query.selectViewport().scrollOffset().exec(res => {
					var scrollTop = res[0].scrollTop + 380
					uni.pageScrollTo({
						scrollTop: scrollTop,
						duration: 300
					});
				});
			},
			delCars(index) {
				this.carslist.splice(index, 1)
				this.query.selectViewport().scrollOffset().exec(res => {
					var scrollTop = res[0].scrollTop - 380
					uni.pageScrollTo({
						scrollTop: scrollTop,
						duration: 300
					});
				});
			},
			changeSeries(index) {
				var car_series = this.carslist[index].car_series
				var item = this.seriesList.find(function(item) {
					return item.value === car_series;
				});
				if (item) {
					this.carslist[index].modelList = item.model
				}
			},
			nextStep() {
				var that = this
				if (that.userinfo.wx_avatar == '') {
					uni.showToast({
						title: '请上传您的头像',
						mask: true,
						icon: 'none',
						duration: 1500
					})
					return false;
				}
				if (that.userinfo.wx_username == '') {
					uni.showToast({
						title: '请填写您的昵称',
						mask: true,
						icon: 'none',
						duration: 1500
					})
					return false;
				}
				if (that.name == '') {
					uni.showToast({
						title: '请填写您的姓名',
						mask: true,
						icon: 'none',
						duration: 1500
					})
					return false;
				}
				if (that.mobile == '') {
					uni.showToast({
						title: '请填写您的电话',
						mask: true,
						icon: 'none',
						duration: 1500
					})
					return false;
				} else {
					if (!(/^1[3456789]\d{9}$/.test(that.mobile))) {
						uni.showToast({
							title: '请填写正确的电话',
							icon: 'none',
							duration: 1500
						});
						return false;
					}
				}
				if (that.sex == '') {
					uni.showToast({
						title: '请选择您的性别',
						mask: true,
						icon: 'none',
						duration: 1500
					})
					return false;
				}
				if (that.birthday == '') {
					uni.showToast({
						title: '请选择您的出生日期',
						mask: true,
						icon: 'none',
						duration: 1500
					})
					return false;
				}

				that.carslist.forEach((item, index) => {
					if (!item.car_series) {

						uni.showToast({
							title: '请选择您的车系',
							mask: true,
							icon: 'none',
							duration: 1500
						})
						throw new Error('请选择您的车系')
						return false;
					}
					else if (!item.car_license) {
						uni.showToast({
							title: '请上传您的行驶证信息',
							mask: true,
							icon: 'none',
							duration: 1500
						})
						throw new Error('请上传您的行驶证信息')
						return false;
					}
				});

				console.log(that.carslist)
				var obj = {
					join_id: that.join_id,
					scene: that.scene,
					company_id: that.company_id,
					club_id: that.club_id,
					name: that.name,
					mobile: that.mobile,
					sex: that.sex,
					birthday: that.birthday,
					car_series_one: that.carslist[0] ? that.carslist[0].car_series : '',
					// car_model_one: that.carslist[0] ? that.carslist[0].car_model : '',
					car_license_one: that.carslist[0] ? that.carslist[0].car_license : '',
					car_series_two: that.carslist[1] ? that.carslist[1].car_series : '',
					// car_model_two: that.carslist[1] ? that.carslist[1].car_model : '',
					car_license_two: that.carslist[1] ? that.carslist[1].car_license : '',
					car_series_three: that.carslist[2] ? that.carslist[2].car_series : '',
					// car_model_three: that.carslist[2] ? that.carslist[2].car_model : '',
					car_license_threee: that.carslist[2] ? that.carslist[2].car_license : '',
					wx_avatar: that.userinfo.wx_avatar,
					wx_username: that.userinfo.wx_username,
				}
				console.log(obj)
				uni.showModal({
					content: '确认提交申请吗？',
					confirmText: '确认',
					confirmColor: '#00A0DC',
					success: function(res) {
						if (res.confirm) {
							submitClubJion(obj).then(res => {
								if (res.state == 1) {
									uni.showToast({
										title: '提交成功',
										mask: true,
										icon: 'success',
										duration: 1500
									})
									setTimeout(function() {
										uni.navigateBack({
											delta: 1
										})
									}, 2000)
								} else {
									uni.showToast({
										title: res.error[0],
										mask: true,
										icon: 'none',
										duration: 1500
									})
								}
							})
							var params = {
								event_code: '加入车友会-完善信息',
								path: 'pages/group/groupjoin',
								event_id: '',
								title: '',
								source_page: '加入车友会-完善信息-提交申请',
								value: '',
							}
							app.BurialPoint(params)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});


			},
			uploadCarsImg(index) {
				var that = this
				uni.chooseMedia({
					count: 1,
					mediaType: ['image'],
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						var tempFilePaths = res.tempFiles
						uni.uploadFile({
							url: app.globalData.uploadUrl,
							filePath: tempFilePaths[0].tempFilePath,
							name: 'img',
							success: (uploadFileRes) => {
								console.log(JSON.parse(uploadFileRes.data));
								var picdata = JSON.parse(uploadFileRes.data);
								that.carslist[index].car_license = picdata.data.img
								// that.license.push(picdata.data.img)
							}
						});
					}
				});
				var params = {
					event_code: '加入车友会-完善信息',
					path: 'pages/group/groupjoin',
					event_id: '',
					title: '',
					source_page: '加入车友会-完善信息-上传行驶证',
					value: '',
				}
				app.BurialPoint(params)
			},
			delImg(index) {
				this.license.splice(index, 1);
			},
			bindchooseavatar(e) {
				var that = this
				uni.uploadFile({
					url: app.globalData.uploadUrl,
					filePath: e.detail.avatarUrl,
					name: 'img',
					success: (uploadFileRes) => {
						console.log(JSON.parse(uploadFileRes.data));
						var picdata = JSON.parse(uploadFileRes.data);
						that.userinfo.wx_avatar = picdata.data.img
					}
				});
				var params = {
					event_code: '加入车友会-完善信息',
					path: 'pages/group/groupjoin',
					event_id: '',
					title: '',
					source_page: '加入车友会-完善信息-修改头像',
					value: '',
				}
				app.BurialPoint(params)
			},
			changeName(e) {
				this.userinfo.wx_username = e.detail.value
				var params = {
					event_code: '加入车友会-完善信息',
					path: 'pages/group/groupjoin',
					event_id: '',
					title: '',
					source_page: '加入车友会-完善信息-修改昵称',
					value: '',
				}
				app.BurialPoint(params)
			},
		},
		onShareAppMessage(res) {
			app.getShareTask()
			return {
				title: '斯巴鲁官方车友会',
				path: '/pages/group/group?invitation_id=' + uni.getStorageSync(
					'userinfo') ? uni.getStorageSync('userinfo').user_id : '',
				imageUrl: ''
			}
		}
	}
</script>

<style lang="scss">
	.groupjoin {
		.avatar_box {
			width: 100%;
			text-align: center;
			margin-top: 30rpx;

			button::after {
				border: none;
			}
		}

		.avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 100%;
		}

		.avatar_btn {
			display: flex;
			justify-content: center;
			width: 100% !important;
			background-color: transparent;
			text-align: center;
			font-size: 28rpx;
			font-weight: normal;
		}

		.nickname_box {
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			font-size: 28rpx;
			margin-top: 60rpx;
		}

		.editmyinfo_input {
			flex: 1;
			margin-left: 50rpx;
			background-color: #fff;
			padding: 20rpx 30rpx;
			border-radius: 8rpx;
			border: 1rpx solid #E9E9E9;
		}

		.popup_img_box {
			position: fixed;
			top: 250rpx;
			left: 60rpx;
			right: 16rpx;
			z-index: 1001;

			.popup_img {
				width: 100%;
				vertical-align: middle;
			}

			.popup_text_box {
				color: #666666;
				font-size: 28rpx;
				position: absolute;
				top: 20%;
				left: 66rpx;
				right: 115rpx;
				z-index: 1002;
				line-height: 42rpx;
			}

			.pop_close_icon_box {
				position: absolute;
				bottom: -80rpx;
				left: 0;
				right: 0;
				z-index: 1002;
				text-align: center;
			}

		}
	}
</style>